import React, { useState } from 'react';
import {
  Breadcrumb,
  Form,
  Input,
  Radio,
  Space,
  Button,
  Upload,
  message,
} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import pub from '@/css/Tom/pub.less';
import style from '@/css/Tom/Pay.less';
const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 10 },
};
function ApplyList(props: any) {
  const { name, path } = props.route;

  console.log(name, path);
  const rot = [
    { name: '首页', path: '/' },
    { name: '小程序', path: '/storeAllStore' },
    { name: name, path: path },
  ];

  return (
    <div>
      <Breadcrumb>
        {rot.map((e) => (
          <Breadcrumb.Item key={e.name}>
            <a href={e.path}>{e.name}</a>
          </Breadcrumb.Item>
        ))}
      </Breadcrumb>
      <div className={pub.put_top}>{name}x</div>
      <div className={style.box}>
        <Demo />
      </div>
    </div>
  );
}

const Demo = () => {
  const onFinish = (values: any) => {
    console.log(values);
  };
  const [value, set_value] = useState(1);
  function onChange(e: any) {
    console.log('radio checked', e.target.value);
    set_value(e.target.value);
  }
  return (
    <Form {...layout} name="nest-messages" onFinish={onFinish}>
      <Form.Item label="AppID" name="AppID">
        <Input />
      </Form.Item>
      <Form.Item label="SECRET" name="SECRET">
        <Input />
      </Form.Item>
      <Form.Item label="商户号" name="merchant_number">
        <Input />
      </Form.Item>
      <Form.Item label="密匙" name="secret_key">
        <Input />
      </Form.Item>
      <Form.Item label="证书CERT">
        <Upload {...props}>
          <Button type={'primary'} icon={<UploadOutlined />}>
            选择文件
          </Button>
        </Upload>
      </Form.Item>

      <Form.Item label="证书KEY">
        <Upload {...props}>
          <Button type={'primary'} icon={<UploadOutlined />}>
            选择文件
          </Button>
        </Upload>
      </Form.Item>
      <Form.Item label="支付方式" name="payType">
        <Radio.Group onChange={onChange} value={value}>
          <Space size="small" direction="vertical">
            <div className={style.radio}>
              <Radio value={1}>微信支付</Radio>
              <Radio value={2}>微信支付服务商</Radio>
            </div>
          </Space>
        </Radio.Group>
      </Form.Item>
      <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};
const props = {
  name: 'file',
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info: any) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};
export default ApplyList;
